import React from "react";
import {bindEvent, log} from "../../../utils/commonfunc";
import {withRouter} from 'react-router-dom'
import GoBackLayout from "../../../layouts/GoBackLayout/GoBackLayout";
import LocalStorageService from "../../../utils/LocalStorageService";
import {pushWithSearch, searchParams} from "../mall";
import {checkAndGoBack} from "../../best-line-up/best-line-up";
import {getBeanListReq, getGameLoginInfo, getUserDetailReq} from "../../../apis/goApis";
import moment from "moment";
import {test} from "../../../utils/constants";
import {bindScrollEvent} from "../mall";

class MyBean extends React.Component {

    constructor(props) {
        super(props)
        this.uid = LocalStorageService.get('userid')
        this.searchParams = searchParams()
        this.state = {
            bean: 0,
            list: [],
            p: 0,
            end: false,
        }
    }

    componentDidMount() {
        this.get()
            .then(() => {
                this.all()
            })
    }

    get = () => {
        const params = {
            uid: this.uid
        }
        const search = this.searchParams
        if (search.uid) {
            params.uid = search.uid
        }
        return getUserDetailReq(params, true)
            .then((res) => {
                const data = res.data.ok
                if (data) {
                    this.setState({
                        bean: data.Yd,
                    })
                }
            })
    }

    all = () => {
        const params = {
            uid: this.uid,
            p: this.state.p,
            style: 0,
        }
        const search = this.searchParams
        if (search.uid) {
            params.uid = search.uid
        }
        getBeanListReq(params)
            .then((res) => {
                const list = res.data.ok
                if (list) {
                    log(list)
                    this.setState({
                        list: [...this.state.list, ...list,],
                    })
                }
            })
    }

    goToTask = () => {
        const params = {
            uid: this.uid,
            Gametype: 'task',
        }
        if (this.searchParams.uid) {
            params.uid = this.searchParams.uid
        }
        getGameLoginInfo(params)
            .then((res) => {
                const data = res.data.ok
                const end = data.gameUrl
                window.location = end
            })
    }

    next = () => {
        this.setState({
            p: this.state.p + 1,
        }, () => this.all())
    }

    render() {
        const list = this.state.list
        const webview = this.searchParams.webview === 'true'
        const goBackEnd = test ? 'http://test.youtoball.com:8080/ren_wu' : 'http://www.youtoball.com:8080/ren_wu'

        let toTaskButton = <div
            className='my-bean-banner-card-button flex-center-align-center'
            onClick={() => this.goToTask()}
        >
            <span>赚更多应豆</span>
        </div>

        if (webview) {
            toTaskButton = <a href={goBackEnd} className='my-bean-banner-card-button flex-center-align-center'>
                <span>赚更多应豆</span>
            </a>
        }

        return <GoBackLayout
            mainTitle='我的应豆'
            onLeftClick={() => checkAndGoBack(this.props.history, './mall')}
        >
            <div className='my-bean-item-container'
                 ref={el => this.scrollContainer = el}
                 onScroll={() => bindScrollEvent(this.scrollContainer, this.next)}
            >
                <div className='my-bean-banner'>
                    <div className='my-bean-banner-card'>
                        <p className='my-bean-banner-card-title'>应豆余额</p>
                        <p className='my-bean-banner-card-count'>{this.state.bean}</p>
                        <div className='flex-space-between'>
                            <div
                                className='my-bean-banner-card-button flex-center-align-center'
                                onClick={() => pushWithSearch(this.props.history, './mall')}
                            >
                                <span>应豆商城兑换</span>
                            </div>
                            {toTaskButton}
                        </div>
                    </div>
                    <p>应豆明细</p>
                </div>
                {list.map((record, index) => {
                    let styleText = record.Title
                    const style = record.Style
                    if (style === 1) {
                        styleText = '任务活动-' + styleText
                    } else if (style === 2) {
                        styleText = '应豆兑换-兑换' + styleText
                    }
                    const num = record.Num
                    return <div key={index} className='my-bean-item flex-space-between-align-center'>
                        <div>
                            <p className='my-bean-item-title'>{styleText}</p>
                            <p className='gray-text'>{moment(new Date(record.Createt * 1000)).format('YYYY-MM-DD HH:mm:ss')}</p>
                        </div>
                        <p
                            className='my-bean-item-num'
                            style={{
                                color: num > 0 ? '#FF7C00' : '#333333',
                            }}
                        >
                            {num} 应豆
                        </p>
                    </div>
                })}
            </div>

        </GoBackLayout>
    }
}

export default withRouter(MyBean)